<template>
  <div class="chat-page">
    <h1>聊天室: {{ roomId }}</h1>
    <ChatWindow v-if="roomId" :room-id="roomId" />
    <div v-else>
      <p>正在加载聊天室...</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import ChatWindow from '@/components/core/ChatWindow.vue';

const route = useRoute();

// 从路由参数获取 roomId
const roomId = computed(() => {
  const id = route.params.roomId;
  return Array.isArray(id) ? id[0] : id;
});

// TODO: Add logic to handle invalid/missing roomId
// TODO: Fetch room details or check access permissions

</script>

<style scoped>
.chat-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px); /* Adjust based on your layout/header height */
  padding: 1rem;
}

h1 {
  margin-bottom: 1rem;
  text-align: center;
}

/* Ensure ChatWindow takes available space */
.chat-page > div:last-child {
  flex-grow: 1;
  overflow: hidden; /* Prevent chat window from overflowing page */
}
</style>